免费开源的中后台模版。使用了最新的qiankun, Vue3, Webpack5, Vite4, React18, TypeScript等主流技术框架,开箱即用的中后台前端解决方案。具备基础的应用界面,开发与构建配置,应用状态管理,图表图形界面,页面tabs缓存控制等能力。
技术栈主应用: React18+Webpack5+qiankun+antd+react-redux+Typescript子应用1: React18+Vite+antd+react-redux+Typescript子应用2: Vue3+Vite+antd for vue+pinia+Typescriptmock服务: koa启动服务开发环境要求: node v18, 实际测试16也行,最好18
首先在根文件夹执行npm install进行依赖安装,已经在根目录的package.json中使用npm的钩子postinstall自动触发其他服务的依赖安装,如果后面拆分服务,记得将这里的依赖安装关系去掉。
直接启动:
在根目录运行npm run start-all启动以下四个服务分别启动:
在根目录运行npm run start启动主服务在根目录运行npm run start-sub-vue启动vue3子应用服务在根目录运行npm run start-sub-react启动react18子应用服务在根目录运行npm run start-mock启动接口mock服务目录结构├── mock // mock服务├── src // 主应用├── sub-projects // 子应用│ ├── react-admin // react子应用│ └── vue-admin // vue3子应用应用状态同步主应用与子应用分别拥有自己的状态,React主应用与子应用皆使用react-redux与@reduxjs/toolkit创建全局状态管理。Vue子应用则用官方推荐的Pinia库。
相关方法使用:
主应用src/store/connectMainStore.ts与src/qiankun.ts其中src/store/connectMainStore.ts暴露出connect方法,接收一个字符串数组参数。用以指明哪些state需要与子应用共享。connect方法返回值为connectReactStore与connectVueStore。分别提供给React与Vue子应用使用。通过qiankun的props传递。子应用中,接收到connectReactStore与connectVueStore, 分别与自身store关联(注册监听以及同步初始值)。同时为了让主应用能够同步状态,分别需要在对应store中